<template>
  <div style="width: 100%;height: 100%;">
    <add-alert ref="AddAlert" @addAlert="addAlert" />
    <show-alert ref="showAlert" @deleteAlert="deleteAlert" @showDialog="showDialog($event)" />
    <el-dialog v-if="dialogFormVisible" width="90%" :visible.sync="dialogFormVisible">
      <modify-alert ref="modifyAlert" :raw-form="rawForm" @modifyAlert="modifyAlert" />
    </el-dialog>
  </div>
</template>

<script>
import AddAlert from './AddAlert'
import ShowAlert from './ShowAlert'
import ModifyAlert from './ModifyAlert'
import DataForAlertMessage from '@/utils/DataForAlertMessage'

export default {
  name: 'IndexJs',
  components: {
    AddAlert,
    ShowAlert,
    ModifyAlert
  },
  data() {
    return {
      dialogFormVisible: false,
      rawForm: {}
    }
  },
  methods: {
    addAlert() {
      DataForAlertMessage.haveData = false
      this.$refs.showAlert.getAlertList()// AddAlert添加警报后showAlert更新警报信息
    },
    modifyAlert() {
      console.log('modifyAlert')
      DataForAlertMessage.haveData = false
      this.dialogFormVisible = false
      this.$refs.showAlert.getAlertList()// 修改警报后showAlert更新警报信息
    },
    deleteAlert() {
      DataForAlertMessage.haveData = false
      this.$refs.AddAlert.getAlertNameList()// showAlert删除警报后AddAlert更新警报选择列表
    },
    showDialog(data) {
      this.dialogFormVisible = true
      this.rawForm = data
      console.log(data)
    }
  }

}
</script>

<style scoped>
</style>
